<template>
  <view
    class="simple-setting-cardRB"
    @touchstart="touchStart"
    :style="` transform: translateX(-${translateX}px);`"
    @touchmove.stop="touchMove"
    @touchend.stop="touchEnd"
  >
    <view class="title-redio" v-if="show" @click="selectOptions">
      <image src="@/static/Radio.png" v-if="isSelect"></image>
      <image src="@/static/RadioEmpty.png" v-else></image>
    </view>
    <view class="simple-setting-card" @click="openDraw">
      <view class="setting-left">
        <view class="setting-name">
          {{ name }}
        </view>
        <view class="setting-type">
          {{ type }}
        </view>
      </view>
      <view class="setting-box">
        <view class="setting-value">
          <text>{{ value }}</text>
        </view>
        <image class="arrow-right" src="/static/ic_right_arrow.png" />
      </view>
    </view>
    <view
      class="slot-button"
      v-if="!show"
      @click="detailSave(id as number)"
      :style="`color: #ff453a; width: ${delBtnWidth}px;`"
      >删除</view
    >
  </view>
</template>
<script setup lang="ts">
const props = defineProps<{
  name: string
  value?: string | number
  type: string | undefined
  show: string
  isSelect?: boolean
  id?: number
}>()
const emit = defineEmits<{
  (e: 'click', event: Event): void
  (e: 'openTips'): void
  (e: 'selectMe', id: number | undefined): void
  (e: 'deletMe', id: number | undefined): void
}>()

const translateX = ref(0)
const startS = ref(0)
const startM = ref(0)
const delBtnWidth = ref(100)
function openDraw(e: any) {
  emit('click', e)
}
function selectOptions() {
  emit('selectMe', props.id)
}
function detailSave(id: number) {
  uni.showToast({
    title: '删除成功',
  })
  emit('deletMe', id)
}
function touchStart(e: any) {
  if (e.touches.length == 1) {
    //设置触摸起始点水平方向位置
    startS.value = e.touches[0].clientX
  }
}
function touchMove(e: any) {
  if (e.touches.length == 1) {
    let moveX = e.touches[0].clientX
    //手指起始点位置与移动期间的差值
    let disX = startS.value - moveX
    let delBtnWidths = delBtnWidth.value
    let txtStyle = ''
    if (disX == 0 || disX < 0) {
      translateX.value = 0
    } else if (disX > 0) {
      if (!props.show) {
        translateX.value = 100
      }
    }
  }
}
function touchEnd(e: any) {
  if (e.touches.length == 1) {
    startM.value = e.touches[0].clientX
  }
}
</script>

<style lang="less" scoped>
.simple-setting-cardRB {
  display: flex;
  width: calc(100% + 100px);
  overflow: auto;
}
.slot-button {
  display: flex;
  justify-content: center;
  margin-top: 35rpx;
  padding: 0 32rpx;
  // color: let(--secondary-red, #ff453a) !important;
}
.title-redio {
  display: flex;
  justify-content: center;
  margin-top: 35rpx;
  padding: 0 32rpx;
  image {
    height: 40rpx;
    width: 40rpx;
  }
}
.simple-setting-card {
  height: 108rpx;
  padding: 0 40rpx 0 32rpx;
  box-sizing: border-box;
  background-color: #f4f4f6;
  margin-bottom: 24rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  .setting-left {
    .setting-name {
      color: let(--primary-petrol, #2d3746);
      font-size: 18px;
      font-weight: 600;
      letter-spacing: -0.5px;
      display: flex;
    }
    .setting-type {
      color: #333;
      font-size: 24rpx;
      font-weight: 400;
      letter-spacing: -0.5px;
      height: 40rpx;
      display: flex;
      align-items: center;
    }
  }
  .setting-box {
    display: flex;
    align-items: center;
    .setting-value {
      font-weight: 400;
      font-size: 28rpx;
      color: let(--secondary-red, #ff453a);
    }
    .arrow-right {
      width: 16rpx;
      height: 28rpx;
      margin-left: 24rpx;
    }
    .setting-icon {
      width: 28rpx;
      height: 28rpx;
      padding-left: 6rpx;
    }
  }
}
.is-simple-setting-disabled {
  opacity: 0.6;
}
</style>
